<template>
    <div class="login-page">
        <!-- 顶部系统标识 -->
        <div class="system-brand">
            <div class="hexagon-icon">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="#1989fa">
                    <path d="M12 2L4 7v10l8 5 8-5V7l-8-5zM12 12l-8-5m8 0l8 5m-8 5V7" />
                </svg>
            </div>
            <h1>抢单系统</h1>
        </div>

        <!-- 登录表单 -->
        <form class="login-form">
            <div class="input-group">
                <label>用户名</label>
                <input type="text" placeholder="请输入手机号" v-model="loginForm.phone">
            </div>
            <div class="input-group">
                <label>密码</label>
                <div class="password-wrapper">
                    <input :type="'password'" v-model="loginForm.password" placeholder="请输入密码">

                </div>
            </div>

            <!-- 验证码输入组 -->
            <div class="input-group">
                <label>验证码</label>
                <div class="captcha-input-container">
                    <input 
                        type="text" 
                        v-model="loginForm.captcha" 
                        placeholder="请输入验证码"
                        maxlength="4"
                        class="captcha-input"
                    >
                    <div class="captcha-image" @click="refreshCaptcha">
                        <canvas ref="captchaCanvas" width="100" height="48"></canvas>
                        <div class="refresh-hint">点击刷新</div>
                    </div>
                </div>
            </div>

            <div class="remember-me">
                <input type="checkbox" id="remember">
                <label for="remember">记住登录状态</label>
            </div>

            <button type="submit" class="login-btn" @click="handleLogin">登录</button>
        </form>

        <!-- 底部链接 -->
        <!-- <div class="footer-links">
        <a href="#">忘记密码？</a>
        <span class="divider">|</span>
        <a href="#">注册新账号</a>
      </div> -->
    </div>
</template>
  
<script>
import userApi from '@/plugins/api/user'
import { userCaozuo, updateSelf } from '@/plugins/utils/caozuojilu'
export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                phone: '',
                password: '',
                captcha: ''
            },
            loading: false,
            passwordType: 'password',
            redirect: undefined,
            captchaText: '' // 存储当前验证码文本
        }
    },
    mounted() {
        this.generateCaptcha()
    },
    methods: {
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        // 生成验证码
        generateCaptcha() {
            const canvas = this.$refs.captchaCanvas
            const ctx = canvas.getContext('2d')
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            
            // 生成随机验证码
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
            let captcha = ''
            for (let i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length))
            }
            this.captchaText = captcha
            
            // 设置背景
            ctx.fillStyle = '#f0f0f0'
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            
            // 添加干扰线
            for (let i = 0; i < 3; i++) {
                ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
                ctx.lineWidth = 1
                ctx.beginPath()
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
                ctx.stroke()
            }
            
            // 添加干扰点
            for (let i = 0; i < 20; i++) {
                ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
                ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 2, 2)
            }
            
            // 绘制验证码文字
            ctx.font = 'bold 20px Arial'
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            
            for (let i = 0; i < captcha.length; i++) {
                ctx.fillStyle = `rgb(${Math.random() * 100 + 50}, ${Math.random() * 100 + 50}, ${Math.random() * 100 + 50})`
                ctx.save()
                ctx.translate(25 + i * 15, canvas.height / 2)
                ctx.rotate((Math.random() - 0.5) * 0.3)
                ctx.fillText(captcha[i], 0, 0)
                ctx.restore()
            }
        },
        // 刷新验证码
        refreshCaptcha() {
            this.generateCaptcha()
            this.loginForm.captcha = ''
        },
        // 验证验证码
        validateCaptcha() {
            if (!this.loginForm.captcha) {
                this.$toast.fail('请输入验证码')
                return false
            }
            if (this.loginForm.captcha.toUpperCase() !== this.captchaText) {
                this.$toast.fail('验证码错误')
                this.refreshCaptcha()
                return false
            }
            return true
        },
        // 登录
        async handleLogin() {
            // 验证验证码
            if (!this.validateCaptcha()) {
                return
            }
            
            const res = await userApi.login(this.loginForm)
            if (res.code === 200) {
                const user = res.data
                if (user.role <= 2) {
                    localStorage.setItem('user', JSON.stringify(res.data))
                    this.$global.updateUser(res.data)
                    await userCaozuo.login()
                    this.$toast.success('登录成功')
                    this.$router.push('/')
                } else {
                    this.$toast.fail('无权限使用该系统')
                }
            } else {
                this.$toast.fail(res.msg)
            }
        }
    }
}
</script>
  
<style lang="scss" scoped>
/* 基础布局 - 使用position固定 */
.login-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS滑动流畅 */
}

/* 系统标识 - 绝对定位 */
.system-brand {
    position: absolute;
    top: 15vh;
    left: 0;
    right: 0;
    text-align: center;
    transform: translateY(-50%);

    .hexagon-icon {
        margin: 0 auto 12px;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    h1 {
        font-size: 24px;
        color: #333;
        margin: 0;
        font-weight: 600;
    }
}

/* 登录表单 - 绝对定位居中 */
.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
    padding: 0 20px;
    box-sizing: border-box;
}

.input-group {
    margin-bottom: 20px;

    label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: #666;
    }

    input {
        width: 100%;
        height: 48px;
        padding: 0 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        box-sizing: border-box;

        &:focus {
            border-color: #1989fa;
            outline: none;
        }
    }
}

.password-wrapper {
    position: relative;

    .toggle-password {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        user-select: none;
    }
}

/* 验证码样式 */
.captcha-input-container {
    position: relative;
    display: block;
    height: 48px;
}

.captcha-input {
    width: 100%;
    min-width: 0;
    flex: none;
    display: inline-block;
    height: 48px;
    padding-right: 100px;
}

.captcha-image {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:hover {
        border-color: #1989fa;
        transform: scale(1.02);
    }
    
    &:active {
        transform: scale(0.98);
    }
    
    canvas {
        display: block;
        border-radius: 8px;
    }
    
    .refresh-hint {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        font-size: 10px;
        text-align: center;
        padding: 2px 0;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    &:hover .refresh-hint {
        opacity: 1;
    }
}

.remember-me {
    display: flex;
    align-items: center;
    margin: 15px 0 25px;
    font-size: 14px;

    input {
        margin-right: 8px;
    }
}

.login-btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, #1989fa, #36d1dc);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;

    &:active {
        opacity: 0.9;
    }
}

/* 底部链接 - 固定定位 */
.footer-links {
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;

    a {
        color: #1989fa;
        text-decoration: none;

        &:active {
            opacity: 0.8;
        }
    }

    .divider {
        margin: 0 10px;
        color: #ddd;
    }
}

/* 适配不同屏幕高度 */
@media (max-height: 600px) {
    .system-brand {
        top: 10vh;
    }

    .login-form {
        top: 45%;
    }
}

/* 防止键盘弹出时挤压布局 */
@media (max-height: 500px) {
    .system-brand {
        display: none;
    }

    .login-form {
        top: 40%;
    }

    .footer-links {
        position: static;
        margin-top: 20px;
    }
}
</style>